<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh">
<head th:replace="commons :: head('查看选课学生')">
    <title>Messages : Create</title>
</head>
<body>
<div th:insert="professor/professor::nav(2)">
</div>

<div class="container">
    <div class="row">
        <div class="modal fade" id="modal">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 700px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                        <h4 class="modal-title">修改先决课程</h4>
                    </div>
                    <div class="modal-body">
                        <table id="table1" class="table table-responsive table-hover">
                            <thead>
                            <tr>
                                <td>姓名</td>
                                <td>学院</td>
                                <td>地址</td>
                                <td>出生日期</td>
                                <td>手机号</td>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <table id="table" class="table table-responsive table-hover">
            <thead>
            <tr>
                <td>课程计划号</td>
                <td>学年度</td>
                <td>课程名称</td>
                <td>课程学分</td>
                <td>课程类型</td>
                <td>课程费用</td>
                <td>先决课程</td>
                <td>已选课程人数</td>
                <td>查看</td>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="row">
        <div class="col-md-6" id="page_info">
        </div>
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="page_nav">
                </ul>
            </nav>
        </div>
    </div>
    <div th:replace="commons::footer"></div>
    <script>
        var click_id, curPage, total;
        $(function () {
            toPageNum(1);
        });
        function toPageNum(page) {
            $.ajax({
                url: "getOfferings",
                data: "page=" + page,
                type: "get",
                success: function (result) {
                    console.log(result);
                    build_tables(result.extend.pageInfo.list);
                    build_page_info(result.extend.pageInfo);
                    build_page_nav(result.extend.pageInfo);
                }
            });
        }

        //构建信息表
        function build_tables(result) {
            $("#table tbody").empty();
            $.each(result, function (index, item) {
                var id = $("<td></td>").append(item.id);
                var sem = $("<td></td>").append(item.sem.sem);
                var course = $("<td></td>").append(item.course.name);
                var courseScore = $("<td></td>").append(item.course.courseScore);
                var level = $("<td></td>").append(item.course.level);
                var fee = $("<td></td>").append(item.course.fee);
                var preName = $("<td></td>").append(item.preCoures==null?"无":item.preCoures.name);
                var orderNum = $("<td></td>").append(item.orderNum);
                var check = $("<button></button>").addClass("btn btn-primary btn-sm check_student")
                    .append($("<span></span>").addClass("glyphicon glyphicon-edit")).append("查看");
                var btnTd = $("<td></td>").append(check);
                $("<tr></tr>").append(id, sem,course,name, courseScore, level, fee,preName,orderNum, btnTd).appendTo("#table tbody").attr("item_id", item.id);
            })
        }
        //构建分页信息
        function build_page_info(result) {
            total = result.pages;
            curPage = result.pageNum;
            $("#page_info").empty();
            $("#page_info").append("当前第" + result.pageNum + "页，总" + result.pages + "页，总" + result.total + "条记录。")
            total = result.pages;
        }

        //构建分页导航条
        function build_page_nav(result) {
            $("#page_nav").empty();
            var firstLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "javascript:toPageNum(1);"));
            var preLi = $("<li></li>").append($("<span></span>").append("&laquo;")).click(function () {
                toPageNum(result.prePage)
            });
            var nextLi = $("<li></li>").append($("<span></span>").append("&raquo;")).click(function () {
                toPageNum(result.nextPage)
            });
            var lastLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "javascript:toPageNum(" + result.pages + ");"));

            if (!result.hasPreviousPage) {
                firstLi.addClass("disabled");
                preLi.addClass("disabled").unbind("click");
            }
            if (!result.hasNextPage) {
                nextLi.addClass("disabled").unbind("click");
                //lastLi.addClass("disabled").firstChild().removeAttr("href");
            }
            $("#page_nav").append(firstLi, preLi);
            $.each(result.navigatepageNums, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "javascript:toPageNum(" + item + ");"));
                if (item === result.pageNum) {
                    numLi.addClass("active");
                }
                $("#page_nav").append(numLi);
            });
            $("#page_nav").append(nextLi, lastLi);
        }

        //查看
        $(document).on("click", ".check_student", function () {
            click_id = $(this).parent().parent().attr("item_id");
            $.ajax({
                url: 'getSelectStudent?id=' + click_id,
                type: 'get',
                success: function (result) {
                    if(result.code===200){
                        alert("没有学生选此课");
                        return;
                    }
                    $('#table1 tbody').empty();
                    console.log(result);
                    build_tables1(result.extend.data);
                    $("#modal").modal({
                        backdrop: "static"
                    });
                }
            })
        });
        //构建信息表
        function build_tables1(result) {
            $("#table1 tbody").empty();
            $.each(result, function (index, item) {
                var name = $("<td></td>").append(item.name);
                var college = $("<td></td>").append(item.college.collegeName);
                var address = $("<td></td>").append(item.address);
                var birthday = $("<td></td>").append(item.birthday);
                var phone = $("<td></td>").append(item.phone);
                $("<tr></tr>").append(name, college,address,birthday, phone).appendTo("#table1 tbody").attr("item_id", item.id);
            })
        }

    </script>
</div>
</body>
</html>